<template>
	<div class="payment-code-main">
		<!--提货-->
		<div class="pick">
			<!--提货码-->
			<div class="pickcode fix">
				<div class="pickcode_code"><span>提货码：</span>{{pickCode}}</div>
				<div class="pickcode_describe">付款成功！请勿泄露提货码~</div>
			</div>
			<!--实付款-->
			<div class="actualpayment fix">
				<div class="actualpayment_name fl">实付款（含运费）</div>
				<div class="actualpayment_price fr">￥{{actualPayment}}</div>
			</div>
			<!--提货方法-->
			<ul class="pickway">
				<li class="fix">
					<div class="pickway_name fl">预约时间:</div>
					<div class="pickway_cont fl">{{pickWayTime}}</div>
				</li>
				<li class="fix">
					<div class="pickway_name fl">门店名称:</div>
					<div class="pickway_cont fl">{{pickWayName}}</div>
				</li>
				<li class="fix">
					<div class="pickway_name fl">门店地址:</div>
					<div class="pickway_cont fl">{{pickWayAddress}}</div>
					<router-link to="/"><img class="pickway_map fr" src="../assets/image/ico_map@2x.png"></router-link>
				</li>
				<li class="fix">
					<div class="pickway_name fl">使用期限:</div>
					<div class="pickway_cont fl">{{pickWayTimes}}</div>
				</li>
				<li class="fix">
					<div class="pickway_name fl">门店电话:</div>
					<div class="pickway_cont fl">{{pickWayPhone}}</div>
					<a :href="'tel:'+pickWayPhone"><img class="pickway_phone fr" src="../assets/image/ico_phone@2x.png"></a>
				</li>
			</ul>
		</div>
		<!--使用说明-->
		<div class="use">
			<div class="use_title">使用说明</div>
			<div class="use_littletitle">① 提货地址及方式</div>
			<div class="use_describe">请您到下单时选择的门店提取所购买的商品，您可以在本卡卷页面查看到该地址，提货时请向导购员出示此提货码。</div>
			<div class="use_littletitle">② 提货时间</div>
			<div class="use_describe">未来保障门店的周转率，请您在该提货码的使用期限内完成提货，提货码过期后订单会自动退款给您 ，如果有任何问题，您可以先电话联系商家进行咨询。</div>
		</div>
		<!--跳转-->
		<ul class="gotolist fix">
			<li class="gotoli fix">
				<router-link to="/">
					<img class="gotoimg fl" src="../assets/image/ico_indent@2x.png">
					<p class="gotop fl">查看订单</p>
				</router-link>
			</li>
			<li class="gotoli fix">
				<router-link to="/">
					<img class="gotoimg fl" src="../assets/image/ico_home@2x.png">
					<p class="gotop fl">返回首页</p>
				</router-link>
			</li>
		</ul>
		<!--热门-->
		<div class="home_hot">
			<img class="hot_title" src="../assets/image/title_img@2x.png">
			<div class="hot_main">
				<ul class="fix">
					<li>
						<router-link to="/"><img class="hot_img" src=""></router-link>
						<div class="hot_describe">
							<p class="hot_describe_p">{{hotGoodsName}}</p>
							<span class="hot_describe_span">￥ {{hotGoodsPrice}}</span>
							<img class="hot_describe_img" src="../assets/image/ico_shopping-car@2x.png">
						</div>
					</li>
					<li>
						<router-link to="/"><img class="hot_img" src=""></router-link>
						<div class="hot_describe">
							<p class="hot_describe_p">{{hotGoodsName}}</p>
							<span class="hot_describe_span">￥ {{hotGoodsPrice}}</span>
							<img class="hot_describe_img" src="../assets/image/ico_shopping-car@2x.png">
						</div>
					</li>
					<li>
						<router-link to="/"><img class="hot_img" src=""></router-link>
						<div class="hot_describe">
							<p class="hot_describe_p">{{hotGoodsName}}</p>
							<span class="hot_describe_span">￥ {{hotGoodsPrice}}</span>
							<img class="hot_describe_img" src="../assets/image/ico_shopping-car@2x.png">
						</div>
					</li>
					<li>
						<router-link to="/"><img class="hot_img" src=""></router-link>
						<div class="hot_describe">
							<p class="hot_describe_p">{{hotGoodsName}}</p>
							<span class="hot_describe_span">￥ {{hotGoodsPrice}}</span>
							<img class="hot_describe_img" src="../assets/image/ico_shopping-car@2x.png">
						</div>
					</li>
				</ul>
			</div>
		</div>
	</div>
</template>
<script type="text/javascript">
import Vue from 'vue'

export default {
	name: 'app',
	data () {
		return {
			pickCode:"8814 2344 7",
			pickWayTime:"2017年7月6日  星期六  11:00-17:00",
			pickWayName:"乐町（南山海岸城店）",
			pickWayAddress:"广东省 深圳市 南山区 海岸城 广东省 深圳市 南山区 海岸城",
			pickWayTimes:"2017.07.15 - 2017.07.30",
			pickWayPhone:"0755-1233211",
			actualPayment:65.00,
			hotGoodsName:"ELLY 2017 新款 阔腿九分牛仔裤",
			hotGoodsPrice:298
		}
	},
	methods () {
	}
}
</script>
<style lang="scss">
  .payment-code-main{
    .pickcode{ width: 100%; height: 2rem; background: #ff365d; }
    .pickcode_code{
      padding-top: 0.66rem; height: 0.4rem; line-height: 0.4rem; text-align: center; font-size: 0.4rem; color: #fff;
      span{ font-size: 0.24rem; color: #fff; }
    }
    .pickcode_describe{ padding-top: 0.2rem; height: 0.2rem; line-height: 0.2rem; text-align: center; font-size: 0.2rem; color: #fff; }
    .actualpayment{ padding: 0 0.3rem; height: 0.88rem; line-height: 0.88rem; background: #fff; border-bottom: 0.06rem solid #f4f5f5; }
    .actualpayment_name{ font-size: 0.24rem; color: #333; }
    .actualpayment_price{ font-size: 0.28rem; color: #ff365d; }
    .pickway{
         padding: 0 0.3rem; background: #fff;
      li{
        width: 100%;
        +li{ border-top: 1px solid #ddd; }
      }
    }
    .pickway_name{ width: 1.36rem; height: 0.8rem; line-height: 0.8rem; font-size: 0.24rem; color: #353535; }
    .pickway_cont{ padding: 0.18rem 0 0.14rem; width: 4.8rem; line-height: 0.46rem; font-size: 0.24rem; color: #333; }
    .pickway_map{ display: block; margin-top: 0.48rem; width: 0.28rem; height: 0.28rem; }
    .pickway_phone{ display: block; margin-top: 0.28rem; width: 0.28rem; height: 0.28rem; }
    .use{ padding: 0.3rem; background: #fff; border-top: 0.2rem solid #f4f5f5; border-bottom: 0.06rem solid #f4f5f5; }
    .use_title{ height: 0.24rem; line-height: 0.24rem; font-size: 0.24rem; color: #333; }
    .use_littletitle{ padding-top: 0.26rem; line-height: 0.24rem; font-size: 0.24rem; color: #666; }
    .use_describe{ padding-top: 0.16rem; line-height: 0.32rem; font-size: 0.24rem; color: #999; }
    .gotolist{ height: 0.9rem; }
    .gotoli{
      float: left; width: calc(100%/2 - 1px);
      +.gotoli{ border-left: 2px solid #f4f5f5; }
    }
    .gotoimg{ display: block; padding: 0.32rem 0.24rem 0 1.16rem; width: 0.28rem; height: 0.28rem; }
    .gotop{ line-height: 0.9rem; font-size: 0.24rem; color: #333; }
    .home_hot{
      background: #f4f5f5;
      .hot_title{ display: block; margin: 0 auto; padding: 0.5rem 0 0.3rem; width: 2.25rem; height: 0.61rem; }
      .hot_main{
        padding: 0 0.3rem;
        li{ margin-bottom: 0.3rem; width: 3.3rem; height: 5.4rem; }
        li:nth-child(odd){ float: left; }
        li:nth-child(even){ float: right; }
        .hot_img{ display: block; width: 3.3rem; height: 3.3rem; }
        .hot_describe{ width: 3.3rem; height: 2.1rem; background: #fff; position: relative; }
        .hot_describe_p{ padding: 0.3rem 0.3rem 0; line-height: 0.42rem; font-size: 0.28rem; color: #3e3e3e; }
        .hot_describe_span{ display: block; height: 0.32rem; line-height: 0.32rem; font-size: 0.32rem; color: #ff365d; position: absolute; left: 0.3rem; bottom: 0.28rem; }
        .hot_describe_img{ display: block; width: 0.28rem; height: 0.28rem; position: absolute; right: 0.3rem; bottom: 0.3rem; }
      }
    }
  }

</style>
